<template>
  <div class="default-main ba-table-box">
      <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

      <!-- 表格顶部菜单 -->
      <TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
          quick-search-placeholder="根据分类名称模糊查询" />
      <!-- 表格 -->
      <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
      <Table />

      <PopupForm ref="formRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { defaultOptButtons } from '/@/components/table'
import PopupForm from './popupForm.vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import { baTableApi } from '/@/api/common'
import baTableClass from '/@/utils/baTable'


defineOptions({
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'user/index',
})
const route = useRoute()
const defalutCustomerId = (route.query.customer_id ?? 0) as number
console.log(defalutCustomerId)
const { t } = useI18n()
const tableRef = ref()
const baTable = new baTableClass(
  new baTableApi('/admin/v1/user/'),
  {
      column: [
          { type: 'selection', align: 'center', operator: false },
            { label: '用户编号', prop: 'label_id', align: 'center', operator: false,showOverflowTooltip:true  },
            { label: '序号', prop: 'username', align: 'center', operator: 'LIKE', operatorPlaceholder: '请输入名称',showOverflowTooltip:true },
            { label: '名称', prop: 'nickname', align: 'center', operator: 'LIKE', operatorPlaceholder: '请输入名称',showOverflowTooltip:true  },
            { label: '头像', prop: 'avatar', align: 'center', render: 'image', operator: false },
            { label: '手机号', prop: 'mobile', align: 'center', operator: 'LIKE', operatorPlaceholder: '请输入作者' ,showOverflowTooltip:true },
            { label: '授权码', prop: 'auth_code', align: 'center', operator: false,showOverflowTooltip:true  },
            // { label: '积分', prop: 'score', align: 'center', operator: false },
            {
                label: '会员',
                prop: 'user_type',showOverflowTooltip:true ,
                width:120,
                align: 'center',
                render: 'tag',
                custom: { '0': 'info', '1': 'success', '2': 'danger' },
                replaceValue: { '0': '普通用户', '1': 'VIP用户', '2': '全站VIP用户' },
            },

            { label: '会员到期时间', prop: 'expiration_time', align: 'center',showOverflowTooltip:true , operator: false },

            {
                label: '创建时间',
                prop: 'create_time',
                align: 'center',
                render: 'datetime',
                sortable: 'custom',
                operator: false,showOverflowTooltip:true 
            },
            {
                label: '操作',
                align: 'center',
                width: '100',
                render: 'buttons',
                buttons: defaultOptButtons(['edit', 'delete']),
                operator: false,
            },
      ],
  },
  {
      defaultItems: {
            customer_id: defalutCustomerId,
            gender: 0,
            status: '1',
            user_type:'0'
      },
  }
)
provide('baTable', baTable)

onMounted(() => {
  baTable.table.ref = tableRef.value
  baTable.mount()
  baTable.getIndex()?.then(() => {
      baTable.dragSort()
  })
})
</script>

<style scoped lang="scss"></style>
